<template>
	<div class="address">
		<ul class="bg-white fs28rem">
			<li class="border-b layout pl15 pr15 flex-left">
				<label>收货人</label>
				<input class="pt15 pb15" type="text" placeholder="请填写" v-model="form.contact_name">
			</li>
			<li class="border-b layout pl15 pr15 flex-left">
				<label>手机号码</label>
				<input class="pt15 pb15" type="number" placeholder="请填写" v-model="form.contact_phone">
			</li>
			<li class="border-b layout pl15 pr15 flex-left" @click="show = true">
				<label>所在地区</label>
				<input class="pt15 pb15" type="text" placeholder="请选择" v-model='address_info' disabled>
				<van-icon class="black" color="#000" size="15px" name="youjiantou"/>
			</li>
			<li class="border-b layout pl15 pr15 flex-left">
				<label>详细地址</label>
				<input class="pt15 pb15" type="text" placeholder="请填写" v-model="form.address">
			</li>
		</ul>
		<van-checkbox v-model="checked" class="pt30 pb30">设为默认地址</van-checkbox>
		<button class="white bg-subject radius align-center block auto w60 pt10 pb10" style="margin-top:40%;" @click='submit'>确认</button>
		<van-popup v-model="show" position="bottom" :overlay="true">
			<van-picker show-toolbar :columns="columns" @change="onChange" @cancel="show = false" @confirm="onConfirm" value-key="name" />
		</van-popup>
	</div>
</template>

<script>
import { Picker,Popup, Checkbox, CheckboxGroup } from 'vant';
	export default{
		components: {
			Picker,
			Popup,
			Checkbox,
			CheckboxGroup
		},
		data()
		{
			return{
				address_key : this.$route.query.address_key,
				checked : true,
				form : {
					contact_phone : '',
					contact_name  : '',
					address       : '',
					province      : '',
					city          : '',
					district      : '',
					is_default    : '',
					id 			  : '' 
				},
				columns : [
					{
			          	values: [],
			          	className: 'column1'
			        },
			        {
			         	values:[],
			          	className: 'column2',
			          	defaultIndex: 2
			        },
			        {
			         	values: [],
			          	className: 'column3',
			          	defaultIndex: 2
			        }
				],
				address_info : '',
				show         : false,
			}
		},
		created()
		{
			this.loadAddessData();
		},
		methods:
		{
			loadAddessData()
			{
				this.$http.get('/UserAddress/getLogistics').then(res =>{
					this.columns[0].values = res.data;
					this.columns[1].values = res.data[0].children;
					this.columns[2].values = res.data[0].children[0].children;
				})
				if(this.$route.query.address_key == 'edit')
				{
					this.form.contact_phone = this.$store.state.edit_address.contact_phone;
					this.form.contact_name = this.$store.state.edit_address.contact_name;
					this.form.address = this.$store.state.edit_address.address;
					this.form.province = this.$store.state.edit_address.province;
					this.form.city = this.$store.state.edit_address.city;
					this.form.district = this.$store.state.edit_address.district;
					this.form.id = this.$store.state.edit_address.id;
					this.address_info  = this.$store.state.edit_address.pcd;
				}
			},
			onChange(picker, values)
			{
				picker.setColumnValues(1, values[0].children);
				picker.setColumnValues(2, values[1].children);
			},
			onConfirm(values)
			{
				this.address_info 	= `${values[0].name}${values[1].name}${values[2].name}`;
				this.form.province  = values[0].id;
		        this.form.city 	   	= values[1].id;
		        this.form.district  = values[2].id;

				return this.show = false;
			},
			submit()
			{
				if(this.checked)
					this.form.is_default = 1;
				else
					this.form.is_default = 0;

				if(this.address_key == 'edit')
				{	
					this.$http.post('/useraddress/update',this.form ).then( res => {
						this.$router.go(-1);
					})
				}
				else{
					this.$http.post('/useraddress/create',this.form).then( res => {
						this.$router.go(-1);
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.address{
		label{
			display: inline-block;
			width: 4rem;
		}
		input, textarea{
			width: 16rem;
			border: 1px solid transparent;
		}
		.van-checkbox{
			text-align: center;
		}
	}
</style>
